<template>
    <div id="publishBlog">
        <form v-if="submmited">
            <h1>发布博客</h1>
            <label>博客标题</label>
            <input type="text" placeholder="输入博客标题" autocomplete="off" v-model="blog.title" />
            <label>博客内容</label>
            <textarea v-model="blog.content" placeholder="输入博客内容" autocomplete="off"></textarea>
            <div id="blogClass">
                <template v-for="item in classify">
                    <input :id="item" type="checkbox" :value="item" v-model="blog.class" />
                    <label :for="item">{{item}}</label>
                </template>
            </div>
            <label>作者：</label>
            <input type="text" placeholder="输入博客作者" autocomplete="off" v-model="blog.author" />
            <button @click.prevent="onSubmit">发布</button>
        </form>
        <h1 v-if="!submmited">{{operation}}博客成功~</h1>
        <div id="preview" v-if="!submmited">
            <h3>博客总览</h3>
            <p>博客标题：{{blog.title}}</p>
            <p>博客内容：</p>
            <p>{{blog.content}}</p>
            <p>博客作者：{{blog.author}}</p>
            <p>博客分类：<b>{{blog.class}}</b></p>
            <router-link :to="{name: 'Home'}">回到首页</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PublishBolg",
        data() {
            return {
                id: this.$route.params.id,
                classify: ["Vue.js", "Angular.js", "React.js", "Node.js", "ThinkPHP"],
                operation: "发布",
                blog: {title: "", content: "", author: "", class: []},
                submmited: true
            }
        },
        methods: {
            onSubmit() {
                const query = Bmob.Query("Blog");
                if(this.id) {
                    query.set("id", this.id);
                    this.operation = "修改";
                }
                query.set("title", this.blog.title);
                query.set("content", this.blog.content);
                query.set("author", this.blog.author);
                query.set("class", this.blog.class);
                query.save().then(response => this.submmited = false).catch(error => console.log(error));
            }
        },
        created() {
            if(this.id) {
                const query = Bmob.Query("Blog");
                query.get(this.id).then(response => this.blog = response).catch(error => console.log(error));
            }
        }
    }
</script>

<style scoped>
    #publishBlog {margin: 20px auto;max-width: 600px;padding: 20px;}
    #publishBlog * {box-sizing: border-box;}
    label {display: block;margin: 20px 0 10px;}
    input[type="text"], textarea, select {display: block;width: 100%;padding: 8px;}
    textarea {height: 200px;}
    #blogClass {margin-top: 20px;}
    #blogClass label {display: inline-block;margin: 0 15px 0 0;}
    #blogClass input {display: inline-block;}
    button {display: block;margin: 20px 0;background-color: crimson;color: #fff;border: 0;padding: 14px;border-radius: 4px;font-size: 18px;cursor: pointer;}
    #preview {padding: 10px 20px;border: 1px dotted #ccc;margin: 30px 0;}
    h3 {margin-top: 10px;}
    a {color: #444;margin-top: 10px;display: block;text-align: right;text-decoration: none;}
</style>